<template>
  <nav aria-label="Page navigation">
    <span class="message">总共有{{total}}数据， 共{{pageTotal}}页， 当前是第{{currentPageNum}}页</span>

    <ul class="pagination">
      <li>
        <span class="page-size">每页数量
          <select @change="changePageSize">
            <option v-for="pages in pageSizeList" :value="pages" :selected="pages === pageSize">{{pages}}</option>
          </select>
        </span>
      </li>
      <li>
        <a href="#" aria-label="Previous" v-on:click="$emit('page', currentPageNum - 1, pageSize)" style="disable">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li v-for="p in pageArray" :class="{active:p==currentPageNum}"><a v-on:click="$emit('page', p, pageSize)">{{p}}</a></li>
      <li>
        <a href="#" aria-label="Next" v-on:click="$emit('page', currentPageNum + 1, pageSize)">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
  export default {
    name: 'pagination',
    props: {
        total: {
          type: Number,
          required: true
        },
        pageSize: {
            type: Number,
            default: 10
        },
        currentPageNum: {
            type: Number,
            default: 1
        },
        pageNumShow: {
            type: Number,
            default: 10
        },
        pageSizeList: {
           type: Array
        }
    },
    data() {
        return {
        }
    },
    computed: {
        pageTotal: function() {
          var pageTotal = parseInt(this.total / this.pageSize);
          if (pageTotal * this.pageSize < this.total) pageTotal++;
          return pageTotal;
        },
        pageArray:function() {
          var leftPageNumShow = parseInt(this.pageNumShow/2);
          var first = 1;
          if (this.currentPageNum - leftPageNumShow > 0) first = this.currentPageNum - leftPageNumShow;
          var end = first + this.pageNumShow;
          if (end > this.pageTotal) {
              end = this.pageTotal + 1;
              first = end - this.pageNumShow;
              if (first < 1) first = 1;
          }
          var pageArray = [];
          for (var i=first; i<end; i++) {
            pageArray.push(i);
          }
          return pageArray;
        }
    },
    methods: {
        changePageSize:function(ele) {
          var optionTxt = $(ele.target).find("option:selected").text();
          var optionVal = ele.target.value;
          this.$emit('page', this.currentPageNum, optionVal);
        }
    }
  }
</script>

<style>
 .message {
    float: right;
    padding: 0.5rem 0.5rem;
    margin-left: -1px;
    margin-top: 20px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
  }

.page-size {
    float: right;
    /*padding: 0.3rem 0.5rem;*/
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
  }
</style>
